<template>
  <div
    class="v-editor-element-appliedStereotype g-jc-sb"
    style="overflow: hidden"
  >
    <div
      class="g-flex-1"
      style="overflow: hidden"
    >
      <div
        v-for="(item, index) of valueDataList"
        :key="index"
        class="g-pd-l-8 g-one-line"
        @contextmenu="propertyModelContextMenu($event, item)"
      >
        <span style="display: flex; align-items: center">
          <span v-if="encrypted">
            <span v-if="(containTermName(item) as ContainTermName[]).length">
              <span
                v-for="(contain,index) in (containTermName(item) as ContainTermName[])"
                :key="index"
              >
                <span
                  v-if="contain.isTerm"
                  class="show-underline"
                  @contextmenu.stop="event => showDetailTerm(event, contain.name)"
                >
                  {{ contain.name }}
                </span>
                <span v-else>{{ contain.name }}</span>
              </span>
            </span>
            <span v-else>{{ desensitize(item.name) }}</span>
          </span>
          <template v-else>
            <img
              class="g-m-r-4"
              style="height: 16px"
              :src="item.icon"
            />
            <span v-if="(containTermName(item) as ContainTermName[]).length">
              <span
                v-for="(contain,index) in (containTermName(item) as ContainTermName[])"
                :key="index"
              >
                <span
                  v-if="contain.isTerm"
                  class="show-underline"
                  @contextmenu.stop="event => showDetailTerm(event, contain.name)"
                >
                  {{ contain.name }}
                </span>
                <span v-else>{{ contain.name }}</span>
              </span>
            </span>
            <span v-else>
              <span v-if="item.name">{{ item.name }}</span>
            </span>
          </template>
        </span>
      </div>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <img
        src="statics/icons/app/iconmore.png"
        style="cursor: pointer"
        @click="showStereotypeModel"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, inject, Ref } from "vue";
import { ModelValue, PropertyRow } from "../../types";
import { actionManager } from "@/action/ActionManager";
import { propertyModelContextMenu } from "../propertyUtil";
import { ActionKey } from "@/action/ActionKey";
import { ShowStereotypeAction } from "@/modules/model/actions/shape/ShowStereotypeAction";
import { desensitize } from "@/util/common";
import { ShowBatchStereotypeAction } from "@/modules/model/actions/shape/ShowBatchStereotypeAction";
import { ContainTermName, splitOriginTextWithTerms } from "@/mdesign-lib/mdesign-app.umd.js";
import { showDetailTermCommon } from "@/modules/model/service/termBankService";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected: boolean;
  encrypted?: boolean;
}>();

const valueDataList = computed(() => {
  return (props.row.value || []) as ModelValue[];
});

const showStereotypeModel = () => {
  if (props.row.modelIds && props.row.modelIds.length) {
    const action = actionManager.getAction(ActionKey.showBatchStereotype) as ShowBatchStereotypeAction;
    action?.run(props.row.modelIds);
  } else {
    const action = actionManager.getAction(ActionKey.showStereotype) as ShowStereotypeAction;
    action?.run(props.row.modelId, false);
  }
};

function containTermName(model: ModelValue) {
  let _containTermName: ContainTermName[] = [];
  _containTermName = splitOriginTextWithTerms(model.name || "", model.terms || []);
  return _containTermName;
}

function showDetailTerm(event: MouseEvent, termText: string) {
  showDetailTermCommon(event, termText);
}
</script>
<style lang="scss">
.v-editor-element-appliedStereotype-menu {
  .el-checkbox--small {
    height: 16px;
    line-height: 16px;
  }
}
</style>
